<template>
  <view id="box">
    <u-cell-group :border="false">
      <u-cell-item
        title="消息通知已关闭"
        value="未开启"
        :border-bottom="false"
        :title-style="titleStyle"
        :value-style="{fontSize: '33rpx', color: '#F08259'}"
      ></u-cell-item>
    </u-cell-group>
    <p class="hint c-mt20">关闭后，将无法及时收到客服咨询、活动优惠、物流信息 等等消息的通知。</p>
    <p class="hint c-mt40 c-mb30">爱丽雅打开时</p>
    <u-cell-group :border="false">
      <u-cell-item title="爱丽雅内横幅通知" :arrow="false" :title-style="titleStyle">
        <u-switch slot="right-icon" v-model="checked1" active-color="#19BE6B"></u-switch>
      </u-cell-item>
      <u-cell-item title="铃声提醒" :arrow="false" :title-style="titleStyle">
        <u-switch slot="right-icon" v-model="checked2" active-color="#19BE6B"></u-switch>
      </u-cell-item>
      <u-cell-item title="振动提醒" :arrow="false" :title-style="titleStyle">
        <u-switch slot="right-icon" v-model="checked3" active-color="#19BE6B"></u-switch>
      </u-cell-item>
    </u-cell-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked1: '',
      checked2: '',
      checked3: '',
      titleStyle: {
        fontSize: '36rpx',
        color: '#000'
      }
    }
  }
}
</script>


<style>
page {
  background-color: #f5f5f5;
}
.hint {
  color: #b4b4b4;
  font-size: 30rpx;
  padding: 0 37rpx;
}
.c-mt20 {
  margin-top: 20rpx;
}
.c-mt40 {
  margin-top: 40rpx;
}
.c-mb30 {
  margin-bottom: 30rpx;
}
</style>
<style lang="scope">
</style>